<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        const createDOMFromString = domString => {
          const div = document.createElement('div');
          div.innerHTML = domString;
          return div;
        };

        class LikeButton {
          constructor() {
            this.state = { isLiked: false };
          }
          state = undefined;
          el = undefined;

          changeLikeText() {
            const likeText = this.el.querySelector('.like-text');
            this.state.isLiked = !this.state.isLiked;
            likeText.innerHTML = this.state.isLiked ? '取消' : '点赞';
          }

          render() {
            this.el = createDOMFromString(`
                        <button class='like-button'>
                        <span class='like-text'>点赞</span>
                        <span>👍</span>
                        </button>
                 `);
            this.el.addEventListener('click', this.changeLikeText.bind(this), false);
            return this.el;
          }
        }

        document.body.append(new LikeButton().render());
    </script>
</body>

</html>